<template>
	<view class="app">
		<!-- <u-tabs :list="brotherCategory" :hairline="true" @click="click"></u-tabs> -->
		<view class=""><u-tabs :list="brotherCategory" @click="click" :current="index"></u-tabs></view>
		<view class="Product-box">
			<view class="title">{{ goodsCategoryList.currentCategory.name }}</view>
			<view class="text">{{ goodsCategoryList.currentCategory.desc }}</view>
		</view>
		<view class="newProduct">
			<u-grid :border="false" col="2">
				<u-grid-item v-for="(baseListItem, baseListIndex) in newGoodsList.list" :key="baseListIndex" @click="jump(baseListItem.id)">
					<view class="image-box"><image class="_imgs" :src="baseListItem.picUrl" mode=""></image></view>
					<view class="newProduct-text ">
						<text class="newProduct-title">{{ baseListItem.brief }}</text>
						<view class="newProduct-price">{{ baseListItem.retailPrice }}元起</view>
					</view>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			name:'',
			index: '',
			newGoodsList: [],
			goodsCategoryList: [],
			brotherCategory: [],
			// curName: '',
			// curDesc: ''
		};
	},
	onLoad(option) {
		this.index = option.index;//定义index下标
		//获取商品列表
		this.$get(this.API.goodsList, {
			id: option.id
		}).then(res => {
			this.newGoodsList = res.data.data;
		});
		
		this.$get(this.API.goodsCategory, {
			id: option.id
		}).then(res => {
			this.goodsCategoryList = res.data.data;
			// this.curName = res.data.data.currentCategory[this.index].name;
			// this.curDesc = res.data.data.currentCategory[this.index].desc;
			this.brotherCategory = res.data.data.brotherCategory;
		});
	},
	methods: {
		jump(index) {
			uni.navigateTo({
				url: '../../productDetails/productDetails?id=' + index
			});
		},
		//点击导航栏
		click(item) {
		
			let name = item.name;
				console.log(2222,name)
			this.$get(this.API.goodsCategory, {
				id: item.id
			}).then(res => {
				this.goodsCategoryList = res.data.data;
			});
			this.$get(this.API.goodsList, {
				keyword: name,
				index: index
			}).then(res => {
				this.newGoodsList = res.data.data;
			});
		}
	}
	 
	
};
</script>

<style lang="scss" scoped>
.app {
	.title {
		text-align: center;
	}
	.text {
		padding: 10rpx 0;
		text-align: center;
		font-size: 28rpx;

		color: #c0c4cc;
	}
	.newProduct {
		margin: 50rpx;
		.image-box {
			height: 200rpx;
			._imgs {
				width: 200rpx;
				height: 190rpx;
			}
		}
		.newProduct-text {
			margin: 10px;
			.newProduct-title {
				font-size: 20rpx;
			}
			.newProduct-price {
				font-size: 20rpx;
				color: #f56723;
				text-align: center;
			}
		}
	}
}
</style>
